<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bordered</title>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            -webkit-tap-highlight-color: transparent;
        }

        :not(:defined) {
            display: none;
        }

        .fab {
            margin: 48px;
            transition: width .2s ease-out;
            overflow: hidden;
            width: 164px;
            justify-content: flex-start;
        }

        .fab:hover {
            width: 48px;
        }

        .fab > s-icon {
            flex-shrink: 0;
        }
    </style>
</head>

<body>
<s-page theme="auto">
    <s-app-bar id="appbar">
        <!--左侧菜单按钮-->
        <s-icon-button type="filled-tonal" slot="navigation">
            <s-icon type="menu"></s-icon>
        </s-icon-button>
        <!--标题-->
        <div slot="headline" id="UIt" style="opacity:0;">
            kdxiaoyi
        </div>
        <!--右侧按钮-->
        <s-icon-button type="outlined" class="fadeOut" style="display:none;" id="toTop" slot="action"
                       onclick="javascript:void(0);">
            <s-icon type="arrow_upward"></s-icon>
        </s-icon-button>
    </s-app-bar>
    <s-drawer id="sidebar">
        <div id="sidebar_left_parent" slot="start">
            <!--左侧边栏内容-->
        </div>

        <div>
            <s-fab extended="true" class="fab">
                <s-icon type="add" slot="start"></s-icon>
                <span>Floating Button</span>
            </s-fab>

        </div>
        </div>
    </s-drawer>
</s-page>
<script src="https://unpkg.com/sober@0.4.2/dist/sober.min.js" crossorigin="anonymous"></script>

</body>

</html>
